	<template>
		<div style="background-color: #171717;color: #fff;height: 100%;">
			<div style="background-color: #171717;">
				<div style="font-size: 30px; font-weight: 500; margin: 30px; ">设置您的服务器</div>
				<div style="color: #afb2c1;margin-left: 30px;margin-bottom: 10px;">快速设置您喜欢的计划并开始您的新业务。</div>
				<div style="display: flex;flex-wrap: wrap;">
					<div v-for="(item,index) in area" v-bind:key="index" class="area" @click="toNext(item)">
						<div class="area2"></div>
						<div class="area3">
							<!-- <img v-bind:src="item.areaImage" class="area_image" /> -->
							<div class='area_image'>
								<img :src="item.areaImage"
									style="width: 100%; height: 60%;border-radius: 5px;object-fit: contain;" />
							</div>
							<div class="area_text">
								<div style="">
									<div
										style=" display: inline-block; color: #3E92F2;font-size: 20px;font-weight: 700;margin-left: 10px;margin-bottom: 7px;">
										{{item.areaName}}
									</div>
									<div
										style="position: relative; top: -4px;padding: 0 5px; display: inline-block; margin-left: 10px;font-weight: 700; font-size: 13px;background-color: #f20018;border-radius: 15px; text-align: center;">
										≈{{item.delay}}ms
									</div>
								</div>
								<div style="">
									<span v-if="item.line"
										style=" display: inline-block; margin-left: 5px;font-weight: 700; font-size: 13px;background-color: #f2c110;border-radius: 15px; padding: 0 5px; text-align: center;">
										{{item.line}}
									</span>
									<span v-if="item.preferential"
										style=" display: inline-block; margin-left: 5px;font-weight: 700; font-size: 13px;background-color: #f2c110;border-radius: 15px; padding: 0 5px; text-align: center;">
										{{item.preferential}}
									</span>
									<span v-if="item.filings"
										style=" display: inline-block; margin-left: 5px;font-weight: 700; font-size: 13px;background-color: #f2c110;border-radius: 15px; padding: 0 5px; text-align: center;">
										{{item.filings}}
									</span>
									<span v-if="item.shield"
										style="display: inline-block; margin-left: 5px;font-weight: 700; font-size: 13px;background-color: #f2c110;border-radius: 15px; padding: 0 5px; text-align: center;">
										{{item.shield}}
									</span>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>

		</div>
	</template>

	<script>
		import axios, {
			Axios
		} from 'axios';
		import {
			getgoodsinfo,

		} from '../../api/work.js'
		export default {

			data() {
				return {
					autoHeight: "100%",
					area: [],

					selectedIndex: false, // 初始化时没有选中任何项
					buy_goods_info: {
						area: null,
						product: null,
						secret_key: null,
						OS_template: null,
						data_transmission: 0,
						disk_size: 0,
						backups_num: 0,
						backup_space: 0
					},
				};
			},
			computed: {
				// 计算属性
			},
			mounted() {
				this.getMessage()
				this.$refs.scrollContainer.addEventListener('wheel', this.handleScroll);
				window.addEventListener('scroll', this.handleScroll)
				this.getAllMbGoods();
			},
			beforeDestroy() {
				this.$refs.scrollContainer.removeEventListener('wheel', this.handleScroll);
				window.removeEventListener('scroll', this.handleScroll)
			},
			methods: {
				goAnchor(id) {
					var anchor = document.getElementById(id);
					anchor.scrollIntoView();
				},
				handleScroll(event) {
					event.preventDefault(); // 阻止默认滚动行为
					const scrollContainer = this.$refs.scrollContainer;
					const scrollLeft = scrollContainer.scrollLeft;
					const scrollWidth = scrollContainer.scrollWidth;
					const clientWidth = scrollContainer.clientWidth;

					if (event.deltaY < 0) {
						// 向上滚动
						if (scrollLeft > 0) {
							scrollContainer.scrollLeft -= 40; //
						} else {
							scrollContainer.scrollLeft = 0;
						}
					} else {
						// 向下滚动
						if (scrollLeft + clientWidth < scrollWidth) {
							scrollContainer.scrollLeft += 40
						} else {
							scrollContainer.scrollLeft = scrollWidth - clientWidth;
						}
					}
				},
				over(index) {
					this.selectedIndex = index;
					this.is_mb_over = true
					this.is_buy_over = true
				},
				out(index) {
					this.selectedIndex = false;
					this.is_mb_over = false
					this.is_buy_over = false

				},
				toNext(e) {
					// this.$router.push('/demo/goods_2')
					console.log("传递得数据")
					console.log(e)
					this.$router.push({
						path: '/demo/goods_2',
						query: {
							data: e
						}
					})
				},

				//获取服务器信息
				getMessage() {
					getgoodsinfo().then(res => {
						if (res.line === null) {
							res.line = false
						}
						if (res.preferential === null) {
							res.preferential = false
						}
						if (res.filings === null) {
							res.filings = false
						}
						if (res.shield === null) {
							res.shield = false
						}
						console.log(res)
						this.area = res
					}).catch((err) => {
						console.log(err)
					})
					// axios.get('http://45.145.75.2:8102/areaserver/loadAll').then(res => {

					// })
				},
				toConfigure() {
					this.$router.push('/demo/mb_goods_details')
				}

			}
		};
	</script>

	<style scoped>
		.area {
			width: 25%;
			position: sticky;
			margin-left: 2.5%;
			/* margin-right: 2.5%; */
		}

		.area2 {

			width: 100%;
			height: 100px;
			display: flex;
			border-radius: 10px;
			margin-top: 20px;
			border: 1px solid #ebecf0;
			align-items: center;
			cursor: pointer;
		}

		@keyframes rotate {
			100% {
				filter: hue-rotate(-360deg);
			}
		}

		.area:hover .area2 {
			animation: rotate 0.4s linear infinite;
			background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
			border: 1px solid transparent;
		}

		.area3 {
			background: black;
			position: absolute;
			top: 21.5px;
			height: 98px;
			display: flex;
			flex-wrap: wrap;
			width: 99%;
			left: 2.5px;
			border-radius: 8px;
			cursor: pointer;
		}

		.area_text {
			width: 70%;
			height: 70px;
			margin-top: 10px;
		}

		.product {
			width: 20%;
			height: 320px;
			background-color: #171717;
			margin: 20px 20px;
			display: inline-block;
			border-radius: 10px;
			border: 1px solid #ebecf0;
		}


		.area_image {
			display: flex;
			width: 25%;
			height: 100%;
			margin-left: 10px;
			object-fit: contain;
			align-items: center;
			justify-content: center;
			border-radius: 5px;

			/* box-shadow: 2px 2px 5px 2px rgba(97, 97, 97, 0.3); */
		}

		.buy_mb {
			color: #f1672a;
			position: absolute;
			cursor: pointer;
			left: 50%;
			bottom: 10px;
			height: 15%;
			display: flex;
			align-items: center;
			justify-content: center;
			/* background-color: #fff; */
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			font-size: 14px;
			font-weight: 500;

			margin-bottom: 10px;
		}




		.mb_robot.mb_over {
			/* background-color: #fff; */
		}

		.buy_mb.buy_over {
			/* background-color: #f1672a; */
			color: #fff;
		}

		.show_input {
			width: 95%;
			height: 40px;
			font-size: 20px;
			border-radius: 10px;
			border: 1px solid lightgray;
			background-color: #171717;
			color: #E8E8E8;
		}

		.buy_button {
			display: flex;
			background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
			border: none;
			height: 33px;
			padding: 0 15px 0 15px;
			border-radius: 0.5rem !important;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-family: 'Avalors Personal Use';
			letter-spacing: 5px;
			color: #FFFFFF;
			text-shadow: 0 0 4px white;
		}
	</style>